.movingBox {
  position: relative;
  width: 150px;
  height: 150px;
  background-color: var(--swm-white);
  border-radius: 20px;
  animation: moveBox 2s ease-in-out infinite;
}

.rollingBall {
  position: absolute;
  bottom: 0%;
  right: 0%;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: var(--swm-purple-light-100);
  animation: rollBall 2s ease-in-out infinite;
}

[data-theme='dark'] .rollingBall {
  background-color: var(--swm-purple-dark-80);
}

[data-theme='dark'] .movingBox {
  background-color: var(--swm-light-off-navy);
}

@keyframes moveBox {
  0%,
  100% {
    transform: rotate(20deg);
  }
  50% {
    transform: rotate(-20deg);
  }
}

@keyframes rollBall {
  0%,
  100% {
    transform: translateX(0) rotate(0);
  }
  50% {
    transform: translateX(-90px) rotate(720deg);
  }
}
